<!DOCTYPE html>
<html>

<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>乐优商城--微信支付页</title>
        <link rel="icon" href="/assets/img/favicon.ico">
		
	
    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

<body>
		
	<!--页面顶部白条条，由js动态加载-->
	<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
	<div class="top"></div>
	<script type="text/javascript">$(".top").load("shortcut.html");</script>

	<div class="cart py-container" id="payApp">
		<!--logoArea-->
		<div class="logoArea">
			<div class="fl logo"><span class="title">收银台</span></div>
		</div>
		<!--主内容-->

		<a href="payfail.html">支付失败演示页</a>
		<a href="paysuccess.html">支付成功演示页</a>


		<div class="checkout py-container  pay">
			<div class="checkout-tit">
				<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{orderId}}</span></h4>
				<span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{ly.formatPrice(actualPrice)}}</em>元</span>
				<div class="clearfix"></div>
			</div>
			<div class="checkout-steps">
				<div class="fl weixin">微信支付</div>
				<div class="fl sao">
					<p class="red">二维码已过期，刷新页面重新获取二维码。</p>
					<div class="fl code">
						<div id="qrcode"></div>
						<div class="saosao">
							<p>请使用微信扫一扫</p>
							<p>扫描二维码支付</p>
						</div>
					</div>
					<div class="fl phone">

					</div>

				</div>
				<div class="clearfix"></div>
				<p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
			</div>
		</div>

	</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->
		
	
	<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
	<script type="text/javascript" src="js/widget/nav.js"></script>
	<script type="text/javascript">
				$(function(){
					$("ul.payType li").click(function(){
						$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
					})
				})
			</script>

	<!--导入vue相关依赖-->
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
	<script src="./js/qrcode.js"></script>
	<script type="text/javascript">
		var payVm = new Vue({
			el: "#payApp",
			data: {
				ly,
				orderId: 0,
				actualPrice: 0
			},
			created(){
				ly.verify().then(res=>{
					//已登录
					this.orderId = ly.getUrlParam("orderId");
					this.actualPrice = parseInt(ly.getUrlParam("actualPrice"));
					//这里路径，因为网关统一配置了order，controller也又一次配置了order
					ly.http.get("/order/order/url/"+this.orderId).then(({data})=>{
						new QRCode("qrcode", {
							text: data,
							width: 256,
							height: 256,
							colorDark : "#52ff0d",
							colorLight : "#ffffff",
							correctLevel : QRCode.CorrectLevel.H
						});
					});
					// 开启定时任务，查询付款状态
					const taskId = setInterval(() => {
						ly.http.get("/order/order/state/" + this.orderId)
								.then(resp => {
									let i = resp.data;
									if (i === 1) {
										// 付款成功
										clearInterval(taskId);
										// 跳转到付款成功页
										location.href = "/paysuccess.html?orderId=" + this.orderId;
									} else if (i === 2) {
										// 付款失败
										clearInterval(taskId);
										// 跳转到付款失败页
										location.href = "/payfail.html";
									}
								})
					}, 3000);
				}).catch(()=>{
					//未登录
					window.location = "http://www.leyou.com/login.html?returnUrl=http://www.leyou.com/pay.html";
				})
			}

		});
	</script>
</body>

</html>